var arts;
var loading;
var container;
var init = false;
$(function () {
    arts = new Vue({
        el:'#artsController',
        data:{
            type:1,
            page:1,
            limit:10,
            busy:false,
            hasMore:true,
            arts:[],
            hasData:true
        },
        watch:{
            arts:function () {
            }
        },
        methods:{
            loadData:function (page) {
                var that = this;
                if (!that.hasMore){
                    return;
                }
                that.hasData = false;
                that.busy = true;
                //加载数据
                sy.postApi('/api/userInfo/getArtGoodsList',{
                    state:that.type
                    // page:that.page,
                    // limit:that.limit
                },function (data) {
                    $.each(data,function(i,o){
                        o.page = that.page;
                        that.arts.push(o);
                    });
                    that.hasMore = false;
                    loading.text('就有这么多了！');
                    if(data.length < that.limit){
                        that.hasMore = false;
                        loading.text('就有这么多了！');
                        // that.busy = false;
                        // that.page ++;
                    }else{
                        // that.busy = false;
                        // that.page ++;
                    }
                    if (data.length > 0){
                        Vue.nextTick(function () {
                            var $newElems = $('.'+that.page+'page').appendTo(container);
                            $newElems.imagesLoaded(function(){
                                $newElems.animate({ opacity: 1},800);
                                container.masonry( 'appended', $newElems,true);
                                if (that.hasMore){
                                    that.busy = false;
                                    that.page ++;
                                    loading.data("on",true).fadeOut();
                                }else{
                                    loading.text('就有这么多了！')
                                }
                            });
                        });
                    }

                })
            },
            changeType:function (type) {
                if (this.type != type){
                    this.type = type;
                    this.page = 1;
                    this.arts=[];
                    this.busy = false;
                    this.hasMore = true;
                    container.masonry('destroy');
                    this.init();
                    this.loadData(1);
                }

            },
            scroll:function () {
                var that = this;
                $(window).scroll(function(){
                    console.log('scroll:'+loading.data("on"));
                    if(!loading.data("on")) return;
                    // 计算所有瀑布流块中距离顶部最大，进而在滚动条滚动时，来进行ajax请求
                    var itemNum=$('#waterfull').find('.item').length;
                    var itemArr=[];
                    itemArr[0]=$('#waterfull').find('.item').eq(itemNum-1).offset().top+$('#waterfull').find('.item').eq(itemNum-1)[0].offsetHeight;
                    itemArr[1]=$('#waterfull').find('.item').eq(itemNum-2).offset().top+$('#waterfull').find('.item').eq(itemNum-1)[0].offsetHeight;
                    itemArr[2]=$('#waterfull').find('.item').eq(itemNum-3).offset().top+$('#waterfull').find('.item').eq(itemNum-1)[0].offsetHeight;
                    var maxTop=Math.max.apply(null,itemArr);
                    if(maxTop<$(window).height()+$(document).scrollTop()){
                        //加载更多数据
                        loading.data("on",false).fadeIn(800);
                        if (!that.busy){
                            that.loadData();
                        }

                    }
                })
            },
            init:function () {
                container = $('.waterfull ul');
                loading=$('#imloading');
                loading.data("on",true);
                tores();
                container.imagesLoaded(function(){
                    container.masonry({
                        columnWidth: 320,
                        itemSelector : '.item',
                        isFitWidth: true,//是否根据浏览器窗口大小自动适应默认false
                        isAnimated: true,//是否采用jquery动画进行重拍版
                        isRTL:false,//设置布局的排列方式，即：定位砖块时，是从左向右排列还是从右向左排列。默认值为false，即从左向右
                        isResizable: true,//是否自动布局默认true
                        animationOptions: {
                            duration: 800,
                            easing: 'easeInOutBack',//如果你引用了jQeasing这里就可以添加对应的动态动画效果，如果没引用删除这行，默认是匀速变化
                            queue: false//是否队列，从一点填充瀑布流
                        }
                    });
                });
                this.scroll();
                init = true;
            }
        },
        created:function () {

        },
        mounted:function () {
            this.init();
            this.loadData();
        },
        updated:function () {
            // $('.'+this.page+'page').animate({ opacity: 1},800);
            // container.masonry( 'appended', $('.'+this.page+'page'),true);
            // if (this.hasData){
            //     loading.data("on",true).fadeOut();
            // }
        }
    });
})